<template>
  <div class="base-container">
    <t-tabs v-model="tabValue">
      <t-tab-panel v-for="(tab, tabIndex) in tabList" :key="tabIndex" :value="tab.value" >
        <template #label>
          {{tab.label}}<t-badge style="position: relative" :count="tab.count" show-zero :offset="[-6, 0]"></t-badge>
        </template>
        <div v-if="tab.value === '0'">
          <recommend-pending @reload="reload"></recommend-pending>
        </div>
        <div v-if="tab.value === '1'">
          <recommend-complete></recommend-complete>
        </div>
        <div v-if="tab.value === '2'">
          <span>功能开发中...</span>
        </div>
      </t-tab-panel>
    </t-tabs>
  </div>
</template>

<script>
import recommendComplete from "./recommend-complete.vue";
import recommendPending from "./recommend-pending.vue";

export default {
  name: "recommend-index",
  components:{
    recommendComplete,
    recommendPending
  },
  data(){
    return {
      tabValue: '0',
      tabList: [
        { label: '待推荐列表', value: '0', count: 0 },
        { label: '已推荐列表', value: '1', count: 0 },
      ],
      planData: {}
    }
  },
  created() {
    this.getComplete();
    this.getPending();
  },
  methods:{
    reload(){
      this.getComplete();
      this.getPending();
    },
    getPending(){
      this.$api.wcx.innovation.recommendList({
        recommendType:'1',
      }).then(
        (res) => {
          this.tabList[0].count = res.total;
        }).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
    getComplete(){
      this.$api.wcx.innovation.recommendList({
        recommendType:'2',
      }).then(
        (res) => {
          this.tabList[1].count = res.total;
        }).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .t-badge--circle{
  position: relative;
}
</style>
